<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div class="form-group">
        <span class="form-label">反馈截止时间:</span>
        <el-date-picker v-model="feedbackTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format=" yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        :picker-options="expireTimeOption">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addConsultDept()" style="float: right;">
          添加会商部门
        </el-button>
      </div>
      <div class="consult-group">
        <div class="consult-card" v-for="(item,index) in deptList" :key="index">
          <div class="consult-card-title">
            <img :src="`${publicPath}img/error.png`" class="consult-img" @click.stop="removeCard(item.orgCode)">
            <b>会商部门</b>&nbsp;:&nbsp;&nbsp;&nbsp;{{item.orgName}}
          </div>
          <div class="consult-card-content-group">
            <div class="consult-card-content-lt" style="margin-right: -66px;">&nbsp;&nbsp;会商内容:</div>
            <div class="consult-card-content-rt">
              <el-input
                type="textarea"
                :rows="8"
                v-model="item.content">
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <el-collapse v-model="activeNames" accordion style="padding: 12px;">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">申请信息</div>
              <div class="head-explain">
                操作说明
                <i class="el-icon-question"></i>
              </div>
            </div>
          </template>
          <bostech-detail :detail-data="detailData"></bostech-detail>
        </el-collapse-item>
      </el-collapse>
      <div class="consult-button" style="text-align: center;">
        <el-button type="primary" size="small" @click.stop="startDiscussion()">发起会商</el-button>
        <el-button type="info" size="small" @click.stop="goBack()">关闭</el-button>
      </div>
    </div>
    <dept-check :visible="deptVisible" @getCheckInfo="getCheckInfo" @cancel="cancelSupportDept"></dept-check>
  </basic-container>
</template>
<script>
  import {PROJECT_DIC} from '@/const/dict'
  import {projectStartDiscussion, projectNoDiscussion, projectDetail} from "@/api/planning/project";
  import {getDeptTree, getfileinfopage} from "@/api/system";
  import getDetailData from "@/mixins/getDetailData";

  export default {
    name: "startConsult",
    mixins: [getDetailData()],
    data() {
      return {
        multiplefiles: [],
        publicPath: process.env.BASE_URL,
        headerData: {
          title: '发起会商'
        },
        feedbackTime: '',
        textarea: '',
        radio: "1",
        activeNames: ["1"],
        checkedKeys: [],//默认选中的节点
        cachePitchOnValues: [],
        deptVisible: false,
        deptList: [],
        taskId: '',
        expireTimeOption: {
          disabledDate(date) { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
            return date.getTime() <= Date.now();
          }
        },
      };
    },
    created() {
      this.taskId = this.$route.params.id;
      this.getDataDetail(this.$route.query.registerinfoId);
    },
    methods: {
      // 获取规划详情信息
      getDataDetail(registerinfoId) {
        projectDetail(registerinfoId).then(response => {
          this.getresultDetail(response);
        })
      },
      async getresultDetail(response) {
        if (response.data.code == '0') {
          var records = response.data.data;
          if (records.fileId != "" && records.fileId != null) {
            this.multiplefiles = [];
            this.multiplefiles = await this.getfileinfopagetemp(records);
          }
          this.getDetailDataMins(records)
        }
      },
      getfileinfopagetemp(records) {
        return new Promise((resolve, reject) => {
          if (records.fileId != "" && records.fileId != null) {
            getfileinfopage(Object.assign({
              current: 1,
              size: 100,
              fileIds: records.fileId
            })).then(response => {
              var multiplefiles = response.data.data.records;
              resolve(multiplefiles);
            }).catch(
            )
          }
        })
      },
      // 添加会商部门
      addConsultDept() {
        this.deptVisible = true;
        this.cachePitchOnValues = [].concat(this.checkedKeys);
      },
      cancelSupportDept(deptIds, deptNames) {
        this.deptVisible = false;
      },
      getCheckInfo(deptIds, deptNames) {
        let deptIdArray = deptIds.split(",");
        let deptNameArray = deptNames.split(",");
        for (let index in deptIdArray) {
          let item = {"orgCode": parseInt(deptIdArray[index]), "orgName": deptNameArray[index]};
          if (this.deptList.findIndex(item => item.orgCode === deptIdArray[index]) == -1) {
            this.deptList.push(item)
          }
        }
        this.deptVisible = false;
      },
      // 移除会商部门
      removeCard(orgCode) {
        this.deptList.splice(this.deptList.findIndex(item => item.orgCode === orgCode), 1)
      },
      // 发起会商
      startDiscussion() {
        if (!this.feedbackTime) {
          this.$message({
            message: '请先填写反馈截止时间',
            type: 'warning'
          });
          return;
        }
        if (this.deptList.length <= 0) {
          this.$message({
            message: '请选择会商部门',
            type: 'warning'
          });
          return;
        }
        if (this.deptList.filter(item => (!item.content || item.content == '')).length > 0) {
          this.$message({
            message: '您有会商内容暂未填写！',
            type: 'warning'
          });
          return;
        }
        this.$confirm("确定发起会商?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.startDis();
        });
      },
      startDis() {
        var startDiscussion = {
          endDate: this.feedbackTime,
        };
        var imTopicDTOs = [];
        for (var i in this.deptList) {
          var topicMap = {
            description: this.deptList[i].content,
            deptIds: [this.deptList[i].orgCode]
          };
          imTopicDTOs.push(topicMap)
        }
        startDiscussion.imTopicDTOs = imTopicDTOs;
        projectStartDiscussion(this.taskId, startDiscussion).then(response => {
          if (response.data.code == 0) {
            this.$notify({
              title: "成功",
              message: "发起会商成功",
              type: "success",
              duration: 2000
            });
            this.$router.go(-1);
          }
        });
      },
      goBack() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .head-title {
    color: rgb(2, 2, 2);
    text-align: left;
    display: inline;
  }

  .collapse-title {
    font-size: 1rem;
  }

  .head-explain {
    color: #333;
    text-align: left;
    display: inline;
    font-size: 14px;
    margin-left: 5px;
  }

  .head-form {
    float: right;
    margin-right: 16px;
  }

  .collapse-header {
    display: inline-block;
    width: 94%;
  }

  .card-border {
    border: 1px solid #d2d2d2;
  }

  .card-header {
    background: #f5f5f5;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    font-weight: 600;
  }

  .demonstration {
    font-weight: 600;
  }

  .consult-group {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }

  .consult-card {
    margin-left: 18px;
    margin-top: 30px;
    border: 1px solid #dedbdb;
    flex: 0 0 31%;
  }

  .consult-card-title {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #339cdb;
    padding: 10px 10px;
    color: #fff;
  }

  .consult-img {
    width: 25px;
    height: 25px;
    position: relative;
    float: right;
    top: -21px;
    right: -21px;
  }

  .consult-card-content-group {
    width: 100%;
    display: flex;
  }

  .consult-card-content-lt {
    font-weight: 600;
    margin: auto;
    flex: 1;
  }

  .consult-card-content-rt {
    padding: 5px;
    border-left: 1px solid #dedbdb;
    flex: 1.5;
  }

  .consult-card-radio {
    padding: 10px 0;
    border-top: 1px solid #dedbdb;
  }

  .consult-card-radio-rt {
    display: inline-block;
    margin-left: 10px;
  }

  .consult-button {
    margin: 2rem 2rem;
    text-align: right;
  }

  .detail-group {
    padding: 20px;
  }

  .detail-data-line {
    font-size: 1rem;
  }

  .detail-data-label {
    display: inline-block;
    width: 140px;
    font-weight: 600;
  }

  .detail-data-value {
    display: inline-block;
    margin-right: 12px;
    width: 200px;
  }

  .detail-data-file {
    display: inline-block;
    margin-left: 12px;
  }

  .detail-data-img {
    width: 23px;
    height: 23px;
    position: relative;
    top: 6px;
  }

  .form-group {
    padding: 20px;
  }

  .form-label {
    font-weight: 600;
    margin-right: 2rem;
  }
</style>
